}

export default App;

Bootstrap has different components that you can use. To use a component, go to the Bootstrap documentation

(https://react-bootstrap.github.io/), copy the component ’ s markup and update it for your own purposes.

Note that we have dropped the NavDropdown and Search form elements from the Navbar for simplicity. So we just

have a basic bootstrap navbar. If you run the app now, it should give you something like in figure 3:

Figure 3

In the current navbar, we have three links. The first is ‘ React-bootstrap ’ which is like the brand of the website.

Sometimes, this would be a logo, image, or just some text. We will leave it as a text.

The other two are links to ‘ Home ’ and ‘ Link ’ . We will change ‘ Home ’ to ‘ Todos ’ and link it to ‘ /todos.

We will remove ‘ Link ’ and replace it with ‘ Login ’ or ‘ Logout ’ depending on the user ’ s login state. We also

add a ‘ Sign Up ’ link.

So make the following changes in bold:

Modify Bold Code

…

import Navbar from 'react-bootstrap/Navbar';

import Container from 'react-bootstrap/Navbar';

function App() {

const user = null;

return (

<div className="App">

<Navbar bg="primary" variant="dark">

<div className="container-fluid">

<Navbar.Brand>TodosApp</Navbar.Brand>

<Nav className="me-auto">

<Container>

<Link class="nav-link" to={"/todos"}>Todos</Link>

{ user ? (

<Link class="nav-link">Logout ({user})</Link>

) : (

<>[DCB3]

<Link class="nav-link" to={"/login"}>Login</Link>

<Link class="nav-link" to={"/signup"}>Sign Up</Link>

</>

)}

</Container>

</Nav>

</div>

</Navbar>

</div>

);

}

export default App;

Code Explanation

Analyze Code

<Link class="nav-link" to={"/todos"}>Todos</Link>

We use the Link component imported from react-router-dom. Link allows us to route to a different component. So

when a user clicks on ‘ Todos ’ , it will route to the TodosList component. The actual route definition will be

implemented and explained in the next chapter.

Analyze Code

{ user ? (

<Link class="nav-link">Logout ({user})</Link>

) : (

<>[DCB4]

<Link class="nav-link" to={"/login"}>Login</Link>

<Link class="nav-link" to={"/signup"}>Sign Up</Link>